<template>
  <div class="mbti-type-container">
    <el-card class="mbti-type-card">
      <div slot="header" class="card-header">
        <span>MBTI类型管理</span>
        <div class="header-right">
          <el-input
            v-model="searchQuery"
            placeholder="请输入MBTI类型或描述关键字"
            style="width: 300px; margin-right: 10px"
            @keyup.enter.native="handleSearch"
            clearable
            @clear="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
          <el-button
            type="primary"
            size="small"
            @click="handleAdd">
            添加类型
          </el-button>
        </div>
      </div>

      <!-- MBTI类型列表 -->
      <el-table
        v-loading="loading"
        :data="mbtiTypes"
        :border="true"
        style="width: 100%">
        <el-table-column
          prop="mbtiType"
          label="MBTI类型"
          width="100">
        </el-table-column>

        <el-table-column
          prop="typeName"
          label="类型名称"
          width="120">
        </el-table-column>

        <el-table-column
          prop="description"
          label="类型描述"
          min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'description', '类型描述')">
              {{ scope.row.description.length > 20 ? scope.row.description.substring(0, 20) + '...' : scope.row.description }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="model"
          label="性格模型"
          min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'model', '性格模型')">
              {{ scope.row.model.length > 20 ? scope.row.model.substring(0, 20) + '...' : scope.row.model }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="workEnvironmentPreferences"
          label="工作环境偏好"
          min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'workEnvironmentPreferences', '工作环境偏好')">
              {{ scope.row.workEnvironmentPreferences.length > 20 ? scope.row.workEnvironmentPreferences.substring(0, 20) + '...' : scope.row.workEnvironmentPreferences }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="weakness"
          label="潜在弱点"
          min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'weakness', '潜在弱点')">
              {{ scope.row.weakness.length > 20 ? scope.row.weakness.substring(0, 20) + '...' : scope.row.weakness }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="developmentSuggestions"
          label="发展建议"
          min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'developmentSuggestions', '发展建议')">
              {{ scope.row.developmentSuggestions.length > 20 ? scope.row.developmentSuggestions.substring(0, 20) + '...' : scope.row.developmentSuggestions }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="filed"
          label="适合领域"
          min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'filed', '适合领域')">
              {{ scope.row.filed.length > 20 ? scope.row.filed.substring(0, 20) + '...' : scope.row.filed }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="career"
          label="职业建议"
          min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row, 'career', '职业建议')">
              {{ scope.row.career.length > 20 ? scope.row.career.substring(0, 20) + '...' : scope.row.career }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="150"
          fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!-- 详情对话框 -->
      <el-dialog
        :title="detailTitle"
        :visible.sync="detailVisible"
        width="50%">
        <div class="detail-content">{{ detailContent }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
        </span>
      </el-dialog>

      <!-- 添加/编辑对话框 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="60%">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px">
          <el-form-item label="MBTI类型" prop="mbtiType">
            <el-input v-model="form.mbtiType" maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="类型名称" prop="typeName">
            <el-input v-model="form.typeName"></el-input>
          </el-form-item>
          <el-form-item label="类型描述" prop="description">
            <el-input
              type="textarea"
              v-model="form.description"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="性格模型" prop="model">
            <el-input
              type="textarea"
              v-model="form.model"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="工作环境偏好" prop="workEnvironmentPreferences">
            <el-input
              type="textarea"
              v-model="form.workEnvironmentPreferences"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="潜在弱点" prop="weakness">
            <el-input
              type="textarea"
              v-model="form.weakness"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="发展建议" prop="developmentSuggestions">
            <el-input
              type="textarea"
              v-model="form.developmentSuggestions"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="适合领域" prop="filed">
            <el-input
              type="textarea"
              v-model="form.filed"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="职业建议" prop="career">
            <el-input
              type="textarea"
              v-model="form.career"
              :rows="4">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mbtiTypeApi } from '@/api'

export default {
  name: 'MbtiTypeList',
  data() {
    return {
      loading: false,
      saving: false,
      mbtiTypes: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchQuery: '',
      dialogVisible: false,
      dialogTitle: '',
      detailVisible: false,
      detailTitle: '',
      detailContent: '',
      form: {
        mbtiType: '',
        typeName: '',
        description: '',
        model: '',
        workEnvironmentPreferences: '',
        weakness: '',
        developmentSuggestions: '',
        filed: '',
        career: ''
      },
      rules: {
        mbtiType: [
          { required: true, message: '请输入MBTI类型', trigger: 'blur' },
          { pattern: /^[EINS][NSF][TF][JP]$/, message: 'MBTI类型格式不正确', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '请输入类型名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入类型描述', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请输入性格模型', trigger: 'blur' }
        ],
        workEnvironmentPreferences: [
          { required: true, message: '请输入工作环境偏好', trigger: 'blur' }
        ],
        weakness: [
          { required: true, message: '请输入潜在弱点', trigger: 'blur' }
        ],
        developmentSuggestions: [
          { required: true, message: '请输入发展建议', trigger: 'blur' }
        ],
        filed: [
          { required: true, message: '请输入适合领域', trigger: 'blur' }
        ],
        career: [
          { required: true, message: '请输入职业建议', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchMbtiTypes()
  },
  methods: {
    async fetchMbtiTypes() {
      try {
        this.loading = true
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        if (this.searchQuery) {
          params.mbtiType = this.searchQuery
        }
        const res = await mbtiTypeApi.list(params)
        if (res.code === 200) {
          this.mbtiTypes = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.msg || '获取MBTI类型列表失败')
        }
      } catch (error) {
        console.error('获取MBTI类型列表出错:', error)
        this.$message.error('获取MBTI类型列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchMbtiTypes()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.fetchMbtiTypes()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchMbtiTypes()
    },
    handleAdd() {
      this.dialogTitle = '添加MBTI类型'
      this.form = {
        mbtiType: '',
        typeName: '',
        description: '',
        model: '',
        workEnvironmentPreferences: '',
        weakness: '',
        developmentSuggestions: '',
        filed: '',
        career: ''
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑MBTI类型'
      this.form = { ...row }
      this.dialogVisible = true
    },
    async handleSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.saving = true
            let res
            if (this.dialogTitle === '添加MBTI类型') {
              res = await mbtiTypeApi.create(this.form)
            } else {
              res = await mbtiTypeApi.update(this.form.mbtiType, this.form)
            }
            if (res.code === 200) {
              this.$message.success(this.dialogTitle === '添加MBTI类型' ? '添加成功' : '更新成功')
              this.dialogVisible = false
              this.fetchMbtiTypes()
            } else {
              this.$message.error(res.msg || (this.dialogTitle === '添加MBTI类型' ? '添加失败' : '更新失败'))
            }
          } catch (error) {
            console.error(this.dialogTitle === '添加MBTI类型' ? '添加MBTI类型出错:' : '更新MBTI类型出错:', error)
            this.$message.error(this.dialogTitle === '添加MBTI类型' ? '添加失败' : '更新失败')
          } finally {
            this.saving = false
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除该MBTI类型吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await mbtiTypeApi.delete(row.mbtiType)
          if (res.code === 200) {
            this.$message.success('删除成功')
            if (this.mbtiTypes.length === 1 && this.currentPage > 1) {
              this.currentPage--
            }
            this.fetchMbtiTypes()
          } else {
            this.$message.error(res.msg || '删除失败')
          }
        } catch (error) {
          console.error('删除MBTI类型出错:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    showDetail(row, field, title) {
      this.detailTitle = title
      this.detailContent = row[field]
      this.detailVisible = true
    }
  }
}
</script>

<style scoped>
.mbti-type-container {
  padding: 20px;
}

.mbti-type-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-dialog {
  max-height: 80vh;
  overflow-y: auto;
}

.el-form {
  padding-right: 20px;
}

.detail-content {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.el-button--text {
  padding: 0;
  height: auto;
  line-height: 1.5;
}

/* 添加表格分隔线样式 */
::v-deep .el-table__row td {
  border-right: 1px solid #EBEEF5;
}

::v-deep .el-table__row td:last-child {
  border-right: none;
}

::v-deep .el-table th {
  background-color: #F5F7FA;
}

::v-deep .el-table--border th {
  border-right: 1px solid #EBEEF5;
}
</style> 